<!-- 选择弹出窗 -->
<template>
	<div>
		<el-dialog :title="state.title" v-model="state.isShowDialog"  center class="borderRadius10" width="1180">
			<div class="cropper-warp">
				<el-table :data="state.goodList" border style="width: 100%;">
                    <el-table-column label="编码" width="90" align="center">
						<template #default="scope">
							<span>{{ scope.row.data.skuId }}</span>
						</template>
					</el-table-column>
					<el-table-column label="图片" align="center">
						<template #default="scope">
							<div style="display: flex;justify-content:center;align-items: center;">
								<el-image style="width:32px;height: 32px;" :src="scope.row.data.imgUrl" fit="cover" />
							</div>
						</template>
					</el-table-column>
					<el-table-column label="商品名称"  align="center">
						<template #default="scope">
							<span> {{ scope.row.data.spuName }} {{ scope.row.data.skuList[0].skuSerialName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="类型"  align="center">
						<template #default="scope">
							<span>{{ scope.row.data.skuList[0].skuTypeName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="零售价"  align="center">
						<template #default="scope">
							<span>{{ scope.row.data.skuList[0].lowPrice }}</span>
						</template>
					</el-table-column>
					<el-table-column label="折扣比例" v-if="state.type == 'discountSku' || state.type == 'handselDiscountSku'" align="center">
						<template #default="scope">
							<el-input  placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="关联数量" v-if="state.type == 'relatedSku'" align="center">
						<template #default="scope">
							<el-input  placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="活动价" v-if="state.type == 'relatedSku'" align="center">
						<template #default="scope">
							<el-input  placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="单次服务用量" v-if="state.type == 'cardRelatedSku'" align="center">
						<template #default="scope">
							<el-input placeholder="请输入" />
						</template>
					</el-table-column>
                    <el-table-column prop="title" label="操作" width="120" show-overflow-tooltip>
						<template #default="scope">
							<el-button text type="primary" @click="delItem(scope.$index)">
								移除
							</el-button>
						</template>
					</el-table-column>
                </el-table>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel"  >取 消</el-button>
					<el-button type="primary" @click="addGoodsFile()"> 
						<el-icon> <ele-Plus /> </el-icon> 添加商品
					</el-button>
					<el-button type="primary" @click="onSubmit"  >确 认</el-button>
				</span>
			</template>
		</el-dialog>
		<goodSelectDialog  @goodsSubmitFun="goodsSubmitFun" ref="goodSelectDialogRef" />
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, ref, defineAsyncComponent } from 'vue';
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'  ))
// 引入组件
const goodSelectDialog = defineAsyncComponent(() => import('/@/components/dialog/goodSelect.vue'));
// 定义变量内容
const goodSelectDialogRef = ref();
const emit = defineEmits(['selectItemFun'])
const informationVisibel = ref(false)
// 定义变量内容
const state = reactive({
    loading: false,
	isShowDialog: false,
    title:'',
	cropperImgBase64: '',
    param: {
		type : 1,
		keyWord: "",
		pageNum: 1,
		pageSize: 10,  
	},
	query:{
		searchType: [
			{ value: 1, label: 'SPU查询' },
			{ value: 1, label: 'SKU查询' }
		]
	},
    total: 0,
	type: '',
	goodList:[] as Array<any>,
});

// 打开弹窗
const openDialog = ( type: string,data: any) => {
	state.type = type;
	if(type == 'useSku' ){
		state.title ="关联可使用商品"
	}else if(type == 'discountSku' ){
		state.title ="关联可使用折扣商品"
	}else if(type == 'handselUseSku' ){
		state.title ="赠金关联可使用商品"
	}else if(type == 'handselDiscountSku' ){
		state.title ="赠金关联可使用折扣商品"
	}else if(type == 'relatedSku' ){
		state.title ="活动关联商品"
	}else if(type == 'cardRelatedSku' ){
		state.title ="卡项关联商品"
	}else if(type == 'goodsRelatedSku' ){
		state.title ="商品关联商品"
	}
    state.goodList = data;
	state.isShowDialog = true;
};

// 添加视频文件
const addGoodsFile = () => {
	// console.log(informationVisibel.value)
	goodSelectDialogRef.value.openDialog(state.goodList);
}

const delItem = (index:number) => {
	state.goodList.splice(index, 1)
}

// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

const onSubmit = () =>{
	emit('selectItemFun', state.type,state.goodList);
	closeDialog();
}

// 选中关联商品
const goodsSubmitFun = (list: any) =>{
	state.goodList = list.map((item:any) => {return {data:item}});
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
// 隐藏expand 箭头
:deep(.el-dialog){
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-height: calc(50% - 30px);
}
.cropper-warp {
	.cropper-warp-left {
		position: relative;
		display: inline-block;
		height: 350px;
		flex: 1;
		border: 1px solid var(--el-border-color);
		background: var(--el-color-white);
		overflow: hidden;
		background-repeat: no-repeat;
		cursor: move;
		border-radius: var(--el-border-radius-base);
		.cropper-warp-left-img {
			width: 100%;
			height: 100%;
		}
	}
	.cropper-warp-right {
		width: 150px;
		height: 350px;
		.cropper-warp-right-title {
			text-align: center;
			height: 20px;
			line-height: 20px;
		}
		.cropper-warp-right-item {
			margin: 15px 0;
			.cropper-warp-right-value {
				display: flex;
				.cropper-warp-right-value-img {
					width: 100px;
					height: 100px;
					border-radius: var(--el-border-radius-circle);
					margin: auto;
				}
				.cropper-size {
					width: 50px;
					height: 50px;
				}
			}
			.cropper-warp-right-label {
				text-align: center;
				font-size: 12px;
				color: var(--el-text-color-primary);
				height: 30px;
				line-height: 30px;
			}
		}
	}
}
</style>
